<style lang="less">
  @import './simpleChoices.less';
</style>
<template>
  <div>
	<Form :model="seachForm" inline :label-width="80" v-show="!isEditing">
      <FormItem prop="title" label="题目">
        <Input v-model="seachForm.title" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>
	<ButtonGroup v-show="!isEditing">
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>
	<Table v-show="!isEditing" border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="datas"></Table>
    <Page :total="pageInfo.totalRows" page-size=2 @on-change="pageNumberChange" v-show="!isEditing" />
	<Form v-if="isEditing" :model="dataForm" :label-width="80">
    <FormItem prop="subjectID" label="科目">
      请选择科目：
      <template>
        <i-select v-model="dataForm.subjectID" style="width:200px" not-found-text="无科目">
          <i-option v-for="item in courses" clearable :value="item.id" v-bind:key="item.id">
            {{item.id}}->{{item.name}}
          </i-option>
        </i-select>
      </template>
    </FormItem>
    <FormItem prop="chapterID" label="章节">
      请选择章节：
      <template>
        <i-select v-model="dataForm.chapterID" style="width:200px" not-found-text="无章节">
          <i-option v-for="item in chapters" clearable :value="item.id" v-bind:key="item.id">
            {{item.courseId}}->{{item.id}}->{{item.name}}
          </i-option>
        </i-select>
      </template>
    </FormItem>
    <FormItem prop="knowledgeID" label="知识点">
      请选择知识点：
      <template>
        <i-select v-model="dataForm.knowledgeID" style="width:200px" not-found-text="无知识点">
          <i-option v-for="item in knowledgepoints" clearable :value="item.id" v-bind:key="item.id">
            {{item.courseId}}->{{item.chapterId}}->{{item.name}}
          </i-option>
        </i-select>
      </template>
    </FormItem>
    <FormItem prop="difficulty" label="难度">
      请选择难度：
      <template>
        <i-select v-model="dataForm.difficulty" style="width:200px" not-found-text="无知识点">
          <i-option value="1">1</i-option>
          <i-option value="2">2</i-option>
          <i-option value="3">3</i-option>
          <i-option value="4">4</i-option>
          <i-option value="5">5</i-option>
        </i-select>
      </template><br><br><br>
    </FormItem>
      <FormItem prop="tile" label="题目">
        <Input v-model="dataForm.title" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="A" label="选项A">
        <Input v-model="dataForm.A" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="B" label="选项B">
        <Input v-model="dataForm.B" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="C" label="选项C">
        <Input v-model="dataForm.C" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="D" label="选项D">
        <Input v-model="dataForm.D" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="result" label="答案">
        A<input v-model="dataForm.result" type="radio" name="result" value="A"/>&emsp;
        B<input v-model="dataForm.result" type="radio" name="result" value="B"/>&emsp;
        C<input v-model="dataForm.result" type="radio" name="result" value="C"/>&emsp;
        D<input v-model="dataForm.result" type="radio" name="result" value="D"/>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { getsimpleChoicesList, getsimpleChoices, addsimpleChoices, updatesimpleChoices, deletesimpleChoices } from '@/api/simpleChoices'
import {getCourseList, getCourse, addCourse, updateCourse, deleteCourse} from '@/api/course'
import {getChapterList} from '@/api/chapters'
import {getKnowledgepointList} from '@/api/knowledgepoints'

export default {
  name: 'simpleChoices',
  data () {
	 return {
      message: 'Hello Vue!',
      currentRow: null,
      isEditing: false,
      seachForm: {
        title:''
      },
	  pageInfo: {
        pageNumber: 1,
        pageSize: 3,
        totalRows: 0
      },
      dataForm: {},
	  columns: [{
        type: 'index',
        width: 60,
        align: 'center'
      }, {
        title: this.$t('题目'),
        key: 'title'
      }, {
        title: '选项A',
        key: 'A'
      }, {
      title: '选项B',
      key: 'B'
    }, {
      title: '选项C',
      key: 'C'
    }, {
      title: '选项D',
      key: 'D'
    },{
      title: '答案',
      key: 'result'
    },{
      title: '难度',
      key:'difficulty'
    },{
      title: '科目',
      key:'subjectID'
    },{
      title: '章节',
      key:'chapterID'
    },{
      title: '知识点',
      key:'knowledgeID'
    }],
       datas: [] ,//单选题列表
       courses: [], // 课程列表
       chapters: [], //章节列表
       knowledgepoints: [],//知识点列表
    }
  },
   created() {
    console.log('created message is: ' + this.message);
    this.queryList();
    //this.query();
     this.selectCoursesList();
     this.selectChaptersList();
     this.selectKnowledgepointsList();
  },
  mounted() {
    console.log('mounted message is: ' + this.message);
  },
  methods : {
	seacherSubmit: function() {
      //alert(this.seacherForm);
      this.pageInfo.pageNumber = 1;
      this.queryList();

    },

    //科目显示
    selectCoursesList: function () {
      var queryParams = {};
      getCourseList(queryParams).then(res => {
        this.courses = res.data.rows;
      });
      //alert(this.subjects.length);
    }
    ,
    //章节显示
    selectChaptersList: function () {
      var queryParams = {};
      getChapterList(queryParams).then(res => {
        this.chapters = res.data.rows;
      });
    }
    ,
    //知识点显示
    selectKnowledgepointsList: function () {
      var queryParams = {};
      getKnowledgepointList(queryParams).then(res => {
        this.knowledgepoints = res.data.rows;
      });
    }
    ,

    //单行查询
  query:function() {
    getsimpleChoices1(this.seachForm.title).then(res => {
      //alert(this.seachForm.title);
      this.datas = [];
      this.datas.push(res.data);
    });
    } ,

	queryList: function() {
      var queryParams = {
        title: this.seachForm.title,
        pageNumber: this.pageInfo.pageNumber,
        pageSize: this.pageInfo.pageSize
      };
      getsimpleChoicesList(queryParams).then(res => {
        this.datas = res.data.rows;
      //  alert(res.data.rows);
        this.pageInfo.totalRows = parseInt(res.data.total);
      });
    },
	pageNumberChange: function(pagenum) {
      this.pageInfo.pageNumber = pagenum;
      this.queryList();
    },
	tableCurrentChange: function(currentRow, oldCurrentRow) {
      this.currentRow = currentRow;
    },
	btnAddClick: function() {
      this.dataForm = {};
      this.isEditing = true;
    },
	btnEditClick: function() {
      this.dataForm = this.currentRow;
      this.isEditing = true;
    },
	btnDelClick: function() {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData();
        }
      });
    },
	btnSaveClick: function() {
      if (this.dataForm.id) {
        updatesimpleChoices(this.dataForm.title, this.dataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      } else {
        addsimpleChoices(this.dataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
	btnCancelClick: function() {
      this.isEditing = false;
    },
    delData: function() {
      deletesimpleChoices(this.currentRow.id).then(res => {
        if (res.data && res.data.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    }
   }
  }
</script>
